<template>
    <div class="">

        <el-form ref="ruleFormRef" label-position="top" :model="formInline" label-width="auto" v-if="!isLoading">
            <el-row :gutter="30">
                <re-col :value="8" :xs="8">
                    <el-form-item label=''>
                        <template #label>
                            <div class="flex items-center ">
                                <img class="w-[16px] h-[16px] mr-[7px]" src="@/assets/images/info/info2.png" />
                                <el-text class="text-index-color !font-normal ">所在城市</el-text>
                            </div>
                        </template>
                        <el-text class="!font-normal text-word !ml-[23px] ">
                            {{ isNullOrEmpty( getCitys(formInline?.city) || '暂无城市信息' ) }}
                        </el-text>
                    </el-form-item>
                </re-col>
                <re-col :value="8" :xs="8">
                    <el-form-item label=''>
                        <template #label>
                            <div class="flex items-center ">
                                <img class="w-[16px] h-[16px] mr-[7px]" src="@/assets/images/info/info3.png" />
                                <el-text class="text-index-color !font-normal ">联系人</el-text>
                            </div>
                        </template>
                        <el-text class="!font-normal text-word !ml-[23px]">
                            {{ isNullOrEmpty(  formInline?.contactName || '暂无联系人' ) }}
                        </el-text>
                    </el-form-item>
                </re-col>
                <re-col :value="8" :xs="8">
                    <el-form-item label=''>
                        <template #label>
                            <div class="flex items-center ">
                                <img class="w-[16px] h-[16px] mr-[7px]" src="@/assets/images/info/info4.png" />
                                <el-text class="text-index-color !font-normal ">联系电话</el-text>
                            </div>
                        </template>
                        <el-text class="!font-normal text-word !ml-[23px]">
                            {{ isNullOrEmpty( formInline?.contactPhone || '暂无联系电话' ) }}
                        </el-text>
                    </el-form-item>
                </re-col>
                <re-col :value="8" :xs="8">
                    <el-form-item label=''>
                        <template #label>
                            <div class="flex items-center ">
                                <img class="w-[16px] h-[16px] mr-[7px]" src="@/assets/images/info/info5.png" />
                                <el-text class="text-index-color !font-normal ">建成日期</el-text>
                            </div>

                        </template>
                        <el-text class="!font-normal text-word !ml-[23px]">
                            {{ isNullOrEmpty( formInline?.buildDate || '暂无建成日期信息' ) }}

                        </el-text>
                    </el-form-item>
                </re-col>
                <re-col :value="16" :xs="16">
                    <el-form-item label=''>
                        <template #label>
                            <div class="flex items-center ">
                                <img class="w-[16px] h-[16px] mr-[7px]" src="@/assets/images/info/info6.png" />
                                <el-text class="text-index-color !font-normal ">项目地址</el-text>
                            </div>
                        </template>
                        <el-text class="!font-normal text-word !ml-[23px]">
                            {{ isNullOrEmpty( formInline?.address || '暂无地址信息' ) }}
                        </el-text>
                    </el-form-item>
                </re-col>
                <re-col :value="24" :xs="24">
                    <el-form-item label=''>
                        <template #label>
                            <div class="flex items-center ">
                                <img class="w-[16px] h-[16px] mr-[7px]" src="@/assets/images/info/info7.png" />
                                <el-text class="text-index-color !font-normal ">项目备注</el-text>
                            </div>
                        </template>
                        <el-text class="!font-normal text-word !ml-[23px]">
                            {{ isNullOrEmpty( formInline?.remark || '暂无备注信息' ) }}

                        </el-text>
                    </el-form-item>
                </re-col>

                <re-col :value="24" :xs="24">
                    <el-form-item label='' class="">
                        <template #label>
                            <div class="flex items-center ">
                                <img class="w-[16px] h-[16px] mr-[7px]" src="@/assets/images/info/info1.png" />
                                <el-text class="text-index-color !font-normal ">地图位置</el-text>
                            </div>

                        </template>
                        <SjMap
                        v-if="formInline.lng != ''"
                        :labelMarkers="[{lng: formInline.lng,lat: formInline.lat}]"
                        :area="[formInline.mapPoints]"
                        :isEdit="false"
                         style="margin-left: 23px;"
                         ref="mapref" >
                        </SjMap>
                        <!-- <Maps style="width: 100%;margin-top: 0px;margin-left: 20px;" v-model:center.sync="formInline.mapPoints"
                            v-model:area="formInline.mapPoints"></Maps> -->
                    </el-form-item>
                </re-col>
            </el-row>
        </el-form>

    </div>
</template>
<script lang="ts" setup>
import { isNullOrEmpty } from '@/utils/functions'
import { ref, watch } from "vue";
import SjMap from "@/components/mapForm/map.vue"
// import Maps from "../project-management/project-management/components/map.vue"
import type { infoType } from '@/api/operate/project-management/projectManagement/index';

import ReCol from "@/components/ReCol";
type FormProps = {
    formInline: infoType,
    isLoading: boolean
}
const refMap = ref()
const props = withDefaults(defineProps<FormProps>(), {
    formInline: () => ({} as infoType),
    isLoading: false
});

const getCitys = (item?: string[]) => {
    if (item) {
        return item.join(" ")
    } else {
        return ''
    }
}
const getLatLang = (item?: string[]) => {
    if (item) {
        console.log("item", item);

    } else {
        return ''
    }
}
const mapref = ref()
onMounted(() => {
    setTimeout(() => {
    mapref.value.setCenter([props.formInline.lng, props.formInline.lat])
}, 500);
    //  console.log("组件",mapdata.center[0], mapdata.center[10]);
})


</script>
<style scoped>
::v-deep .el-form-item__label {
    line-height: 31px !important;
}

.text-word {
    word-break: break-all;
}
</style>
